﻿
@{
    ViewBag.Title = "Index";
}

<div class="row " id="addrow" v-show="isShow" style="display: none" >
    <div class="panel panel-primary ">
        <div class="panel-heading">
            <h3 class="panel-title">产品详情</h3>
        </div>
        <form class="form-inline panel-body" id="f1">
            <div class="form-group">
                <label class="control-label" for="title">名称</label>
                <input type="text" id="title" name="title" class="form-control" required="required" v-model="row.title" />
                <input type="hidden" id="id" name="id" v-model="row.id" />
            </div>
            <div class="form-group">
                <label class="control-label" for="cateId">类型</label>
                <select id="cateId" name="cateId" class="form-control" required="required" v-model="row.cateId">
                    <option v-for="c in cates" v-bind:value="c.value">{{c.title}}</option>
                </select>
            </div>
            <div class="form-group">
                <label class="control-label" for="price">价格</label>
                <div class="input-group">
                    <input type="number" id="price" name="price" min="1" step="0.1" class="form-control" required="required" v-model="row.price" />
                    <span class="input-group-addon">元</span>
                </div>

            </div>
            <div class="form-group">
                <label class="control-label" for="unit">单位</label>
                <input type="text" id="unit" name="unit" value="" class="form-control" required="required" v-model="row.unit" />
            </div>

            <div class="form-group">
                <label class="control-label" for="weight">权重</label>
                <input type="number" id="weight" name="weight" class="form-control" v-model="row.weight" />
            </div>
            <div class="form-group">
                <label class="control-label" for="status">状态</label>
                <select id="status" name="status" class="form-control" required="required" v-model="row.status">
                    <option v-for="s in status" v-bind:value="s.value">{{s.title}}</option>
                </select>
            </div>
            <div class="form-group">
                <label class="control-label" for="file1">图片</label>
                <div class="input-group">
                    <input type="file" class="form-control" id="file1" onchange="uplaodImg(this);" />
                    <input type="hidden" id="imgUrl" name="imgUrl" v-model="row.imgUrl" />
                    <span class="input-group-btn">
                        <button type="button" class="btn" v-bind:data-url="row.imgUrl"><span class="glyphicon glyphicon-eye-open"></span></button>
                    </span>
                </div>
            </div>
            <div class="form-group">
                <label class="" for="isShowInHome" >
                    <input type="checkbox" id="isShowInHome" name="isShowInHome" class="checkbox " v-model="row.isShowInHome" />在首页显示
                </label>

            </div>


        </form>
        <div class="panel-footer ">
            <input type="button" value="提交" class="btn btn-primary btn-sm" v-on:click="submit"/>
            <input type="button" value="取消" class="btn btn-default  btn-sm" v-on:click="h" />
        </div>
    </div>

</div>
<div class="row">
    <div>
        <form class="form-inline" id="search">
            <div class="form-group">
                <label class="control-label" for="title1">名称</label>
                <input type="text" id="title1" name="title" value="" class="form-control" v-model="title" />
            </div>
            <div class="form-group">
                <label class="control-label" for="cateId1">类型</label>
                <select id="cateId1" name="cateId" class="form-control" v-model="cateId">
                    <option v-for="c in cates" v-bind:value="c.value">{{c.title}}</option>
                </select>
            </div>
            <div class="form-group">
                <label class="control-label" for="status1">状态</label>
                <select id="status1" name="status" class="form-control" v-model="status">
                    <option v-for="s in allStatus" v-bind:value="s.value">{{s.title}}</option>
                </select>
            </div>
            <div class="form-group">
                <input type="button" value="查询" class="btn btn-primary" onclick="search.search();"/>
                <input type="button" value="新增" class="btn btn-default" onclick="d.add();" />
            </div>
        </form>
    </div>
    <div  id="grid" >
        <table class="table table-striped table-bordered table-hover">
            <caption>产品列表</caption>
            <tr>
                <th>序号</th>
                <th>标题</th>
                <th>图片</th>
                <th>分类</th>
                <th>价格(元)</th>
                <th>单位</th>
                <th>显示在首页</th>
                <th>权重</th>
                <th>状态</th>
                <th>添加时间</th>
                <th>操作</th>
            </tr>
            <tr v-for="(r, index) in rows " style="display: none" v-show="isShow">
                <td>
                    <input type="checkbox" class="checkbox" v-bind:value="r.Id"/>
                </td>
                <td>{{r.Title}}</td>
                <td>
                    <button class="btn btn-sm" v-bind:data-url="r.ImgUrl" v-if="r.ImgUrl" onclick="prviewImg(this);">
                        <span class="glyphicon glyphicon-eye-open"></span>
                    </button>
            
                </td>
                <td>{{getCateTxt( r.CateId)}}</td>
                <td>{{r.Price}}</td>
                <td>{{r.Unit}}</td>
                <td>
                    <input type="checkbox" class="checkbox" v-bind:value="r.Id" v-bind:checked="r.IsShowInHome" onclick="return false;"/>
                </td>
                <td>{{r.Weight}}</td>
                <td>{{getStatusTxt(r.Status)}}</td>
                <td>{{r.CreateTime.substring(0,19).replace('T', ' ')}}</td>
                <td>
                    <a href="#" class="btn btn-sm btn-default" v-on:click='edit(index);'>编辑</a>
                    <a href="#" class="btn btn-sm btn-default" v-on:click='del(r.Id);'>删除</a>
                </td>
            </tr>
        </table>
        <div class="Page navigation">

        </div>
    </div>
</div>


@section scripts
{
    <script src="/Scripts/smallcompent.js" type="text/javascript"></script>
    <script src="/Scripts/vue.min.js" type="text/javascript"></script>
    <script>
        //编辑框
        var d = new Vue({
            el: "#addrow",
            data: {
                isShow: false,
                cates: [],
                status: [],
                row: {
                    id: 0,
                    title: "",
                    status: 0,
                    cateId: 0,
                    imgUrl: "",
                    unit: "",
                    price: 0,
                    weight: 0,
                    isShowInHome: false
                }
            },
            methods: {
                show: function() {
                    this.isShow = true;
                },
                h: function() {
                    this.isShow = false;
                    this.inital();
                },
                add: function() {
                    this.inital();
                    this.show();
                },
                inital: function() {
                    this.row = {
                        id: 0,
                        title: "",
                        status: 0,
                        cateId: 0,
                        imgUrl: "",
                        unit: "",
                        price: 0,
                        weight: 0,
                        isShowInHome: false
                    };
                },
                submit: function() {
                    var f1 = document.getElementById('f1');
                    if (formCheckValidity(f1)) {
                        var data = this.row;
                        var isAdd = data.id < 1;
                        $.ajax({
                            url: isAdd ? '/product/add' : '/product/update',
                            type: "POST",
                            data: data,
                            success: function(r) {
                                if (r.code === 0) {
                                    f1.reset(); //重置form
                                    d.h(); //隐藏
                                    isAdd ? search.search() : search.refresh(); //查询第一页或刷新
                                    return;
                                }
                                requestFai(r);
                            },
                            error: function(r) {

                            }
                        });
                    }

                }
            }
        });

        //表格
        var grid = new Vue({
            el: "#grid",
            data: {
                isShow: false,
                rows: [],
                page: 1,
                limit: 12,
                count: 0,
                options: []
            },
            methods: {
                search: function() {
                    this.options.limit = this.limit;
                    var p = this.options.page = this.page;
                    var limit = this.limit;
                    $.ajax({
                        url: '/product/list',
                        data: this.options,
                        success: function(r) {
                            if (r.code === 0) {
                                grid.isShow = true;
                                var rows = r.data.rows;
                                grid.rows = rows;
                                //console.table(rows);
                                $(".Page:first").html(fnInitPage(r.data.count, limit, p));
                            }
                            requestFai(r);
                        },
                        error: function(r) {
                            console.log(r);
                        }
                    });
                },
                next: function() {
                    this.page += 1;
                    this.search();
                },
                goto: function(p) {
                    this.page = p;
                    this.search();
                },
                edit: function(i) {
                    var row = this.rows[i];
                    d.show(); //显示
                    d.row.id = row.Id;
                    d.row.title = row.Title;
                    d.row.status = row.Status;
                    d.row.cateId = row.CateId;
                    d.row.imgUrl = row.ImgUrl;
                    d.row.unit = row.Unit;
                    d.row.price = row.Price;
                    d.row.weight = row.Weight;
                    d.row.isShowInHome = row.IsShowInHome;
                },
                del: function(id) {
                    var isContinue = confirm("删除操作是不可逆的，是否继续？");
                    if (isContinue) {
                        $.ajax({
                            url: '/product/delete/' + id,
                            data: {},
                            type:'GET',
                            success: function(res) {
                                if (res.code === 0) {
                                    search.refresh();
                                    return;
                                }
                                requestFai(res);
                            },
                            error: function (res) {
                                
                            }
                        });
                    }
                },
                getStatusTxt: function(s) {
                    //console.log("status "+s);
                    for (var i = 0; i < d.status.length; i++) {
                        if (d.status[i].value === s) {
                            return d.status[i].title;
                        }
                    }
                    return s;
                },
                getCateTxt: function(c) {
                    //console.log("category " + c);
                    for (var i = 0; i < d.cates.length; i++) {
                        if (d.cates[i].value === c) {
                            return d.cates[i].title;
                        }
                    }
                    return c;
                }
            }
        });

        //查询框
        var search = new Vue({
            el: "#search",
            data: {
                cates: [],
                allStatus: [],
                title: "",
                cateId: 0,
                status: 0
            },
            methods: {
                search: function() {
                    var d = {};
                    d.title = this.title;
                    d.cateId = this.cateId;
                    d.status = this.status;
                    grid.options = d;
                    //console.log(d);
                    grid.page = 1;
                    grid.search();
                },
                refresh: function() {
                    grid.search();
                }
            }
        });

        //跳转页
        function goto(p) {
            grid.goto(p);
        }

        //上传图片
        function uplaodImg(f) {
            var rFilter = /^(?:image\/jpeg|image\/jpg|image\/png)$/i;
            var oFile = f.files[0];
            if (!oFile) {
                return;
            }
            if (!rFilter.test(oFile.type)) {
                alert("请选择常用的图片格式文件");
                return;
            }
            fnUploadFile(f,
                function(url) {
                    d.row.imgUrl = url;
                    //$("#imgUrl").val(url);
                });
        }


        $(function() {
            //默认的产品状态
            var status = [{ value: 1, title: "在售" }, { value: 2, title: "售完" }, { value: 3, title: "下架" }];

            d.status = status;

            search.allStatus = [{ value: 0, title: "全部" }].concat(status); //合并数组

            $.getJSON('/category/list',
                null,
                function(r) {
                    var arr = [];
                    for (var i = 0; i < r.length; i++) {
                        arr.push({ "value": r[i].Id, "title": r[i].Title });
                    }
                    d.cates = arr;
                    search.cates = arr;
                    search.cates = [{ value: 0, title: "全部" }];
                    search.cates = search.cates.concat(arr); //合并数组
                });

            search.search();

        });

    </script>
}

